He configurado una aplicación angular y express con líneas de comando angular-cli y express respectivamente. Ya construí una aplicación angular con ng build y cuando quiero servirla con el servidor express, aparece el siguiente error en la consola de Google Chrome:
Uncaught SyntaxError: Unexpected token < runtime.js:1 Uncaught SyntaxError: Unexpected token < polyfills.js:1 Uncaught SyntaxError: Unexpected token < styles.js:1 Uncaught SyntaxError: Unexpected token < vendor.js:1 Uncaught SyntaxError: Unexpected token < main.js:1aquí está mi archivo server.js:
. . . app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/users', usersRouter); app.use('/auth', authRouter); // Catch all other routes and return the angular index file app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'client/dist/client/index.html')); });archivo index.html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Client</title> <base href="./"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> <script type="text/javascript" src="runtime.js"></script> <script type="text/javascript" src="polyfills.js"></script> <script type="text/javascript" src="styles.js"></script> <script type="text/javascript" src="vendor.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html> No hay problema con ng serve y la aplicación funcionará sin problemas y también cuando abro index.html con el navegador también funciona, creo que de alguna manera se relaciona con el servidor express.
Como dijo Mateusz, todas sus solicitudes están devolviendo el archivo index.html. Si abre las herramientas de desarrollo en Chrome y mira en la pestaña "Red" y ve las respuestas para cada uno de esos archivos, verá que el contenido de cada uno de esos archivos es en realidad el archivo index.html. Lo que debe hacer es crear una lista de excepciones para permitir que el servidor devuelva esos archivos js y otros tipos de archivos como imágenes.
const allowed = [ '.js', '.css', '.png', '.jpg' ]; // Catch all other routes and return the angular index file app.get('*', (req, res) => { if (allowed.filter(ext => req.url.indexOf(ext) > 0).length > 0) { res.sendFile(path.resolve(`client/dist/cient/${req.url}`)); } else { res.sendFile(path.join(__dirname, 'client/dist/client/index.html')); } });Creo que el problema es que sus archivos de script se cargan desde el nivel raíz, lo que hace que su navegador solicite http://example.com/XXX.js . Por eso caen en la ruta del Expreso * . Esto significa que cada solicitud de XXX.js obtiene el mismo archivo index.html que el motor JS no puede analizar correctamente.